<template>
	<div class="outer">
    <search-header>
      <span class="back" @click="goBack()"></span>
      <input type="text" slot="inputs" placeholder="络漫宝" @focus.prevent="goAdvice()" v-model="searchString">
      <div slot="action" @click="goDataPage(searchString)">搜索</div>
    </search-header>
    <router-view/>   
  </div>
</template>
<script>
import searchHeader from '@/components/searchHeader'
export default {
  name: 'search',
  data: function(){
    return {
      headers: {
        title: "搜索页面"
      },
      searchString: '络漫宝',  
    }
  },
  components: {
  	'search-header': searchHeader,
  },
  methods: {
  	goBack: function(){
  		this.$router.go(-1);
  	},
    goDataPage: function(search){
      this.$router.push({name:'choose' , params: {'searchStr': search}});
    },
    goDetail: function(id){
      this.$router.push({name:'choose' , params: {'id': id}});
    },
    goAdvice: function(){
      this.$router.push({name:'choose'});
    }
  }
}
</script>
<style lang="scss" scoped> 
  .outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
</style>